<html>
<head>
	<meta charset="utf-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid #000;
        }     
    </style>
</head>
 
<body>
	<div id="app">
		<table id="productListTable">
			<thead>
				<tr>
					<th>商品名称</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="product in products">
					<td>{{product.productName}}</td>
					<td>{{product.nums}}</td>
					<td>
						<a href="#nowhere" @click="edit(product)">编辑</a>
						<a href="#nowhere" @click="deleteProduct(product.id)">删除</a>
					</td>
				</tr>
				<tr>
					<td colspan="3">			
						商品名称:
						<input type="text" v-model="product4Add.productName" />
						<br> 
						数量：
						<input type="number" v-model="product4Add.nums" />
						<br>
						<button type="button" v-on:click="add">增加</button>
					</td>
				</tr>
			</tbody>
		</table>
	
		<div id="div4Update">
			商品名称:
			<input type="text" v-model="product4Update.productName" />
			<br> 
			数量：
			<input type="number" v-model="product4Update.nums" />
			<input type="hidden" v-model="product4Update.id" />
			<br>
			<button type="button" v-on:click="update">修改</button>
			<button type="button" v-on:click="cancel">取消</button>
	
		</div>
	</div>
  
<script type="text/javascript">
    $("#div4Update").hide();
    //Model
    var data = {
        products: [
	        { id: 1, productName: '袜子', nums: 15},
	        { id: 2, productName: '羊毛衫', nums: 20},
	        { id: 3, productName: '雪纺衫', nums: 24},
	        { id: 4, productName: '高跟鞋', nums: 30}
        ],
        product4Add: { id: 0, productName: '', nums: '0'},
        product4Update: { id: 0, productName: '', nums: '0'}
    };
    
    var maxId = 5;
    for (var i=0;i<data.products.length;i++){
        if (data.products[i].id > maxId)
            maxId=  this.products[i].id;
    }      
          
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                maxId++;
                this.product4Add.id = maxId;
                if(this.product4Add.productName.length==0)
                    this.product4Add.productName = "product#"+this.product4Add.id;
                //将对象加入到数组
                this.products.push(this.product4Add);
                this.product4Add = { id: 0, productName: '', nums: '0'}
            },
            deleteProduct: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.products.length;i++){
                    if (this.products[i].id == id) {
                        this.products.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (product) {
                $("#productListTable").hide();
                $("#div4Update").show();
                this.product4Update = product;
            },
            update:function(){
                $("#productListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(){
                //恢复显示
                $("#productListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
</body>
</html>